<!DOCTYPE html>
<html>
<head>
    <title>数据服务栅格查询</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
        }

        #map {
            height: 510px;
            position: relative;
            border-top: 1px solid #3473b7;
            border-bottom: 1px solid #3473b7;
            cursor: crosshair !important;
        }

        #queryresult {
            position: absolute;
            left: 0;
            top: 470px;
            height: 40px;
            border: 1px solid #999999;
            background-color: #FFFFFF;
            font-size: 14px;
            line-height: 40px;
            padding: 0 5px;
        }
        .tip {
            position: relative;
            height: 20px;
        }
    </style>
    <script type="text/javascript" src="../libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
        var featuresOrigin = [];
        var map, layer, pointLayer, drawPoint,
            host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host,
            url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
            url1 = host + "/iserver/services/data-jingjin/rest/data";

        function init(){
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.LayerSwitcher()]});

            map.events.on({
                "click": mapClicked
            });

            //新建点矢量图层
            pointLayer = new SuperMap.Layer.Vector("pointLayer");

            layer = new SuperMap.Layer.TiledDynamicRESTLayer("china",url, {transparent: true, cacheEnabled: true});
            layer.events.on({"layerInitialized": addLayer});
        }

        function addLayer() {
            map.addLayers([layer, pointLayer]);
            map.setCenter(new SuperMap.LonLat(116.85 ,39.79), 2);
        }

        function query(lonlat) {
            if(!!lonlat) {
                var gridCellQueryParam = new SuperMap.REST.GetGridCellInfosParameter({
                    datasetName: 'JingjinTerrain',
                    dataSourceName: "Jingjin",
                    X: lonlat.lon,
                    Y: lonlat.lat
                });
                var gridCellQueryService = new SuperMap.REST.GetGridCellInfosService(url1, {
                    'eventListeners': {
                        'processCompleted': querySuccess,
                        'processFailed': queryFailed
                    }
                });
                gridCellQueryService.processAsync(gridCellQueryParam);
            } else {
                alert("地理位置错误！");
            }
        }

        function mapClicked(evt) {
            var pixel = new SuperMap.Pixel(evt.clientX, evt.clientY),
                lonlat = map.getLonLatFromPixel(pixel);
            addFeature(lonlat);
            query(lonlat);
        }

        function addFeature(lonlat) {
            pointLayer.removeAllFeatures();
            var point = new SuperMap.Geometry.Point(lonlat.lon, lonlat.lat);
            var feature = new SuperMap.Feature.Vector(point);
            pointLayer.addFeatures([feature]);
        }

        function querySuccess(evt) {
        	var str = "栅格查询结果：",
        		result = evt.result;
    		for(var objName in result) {
    			if(result.hasOwnProperty(objName)) {
    				str += "<span>" + objName + ":" + result[objName] + "</span> ";
    			}    			
    		}
    		document.getElementById("queryresult").innerHTML = str;
        }

        function queryFailed(evt) {
            console.log(evt);
            document.getElementById("queryresult").innerHTML = evt.originResult.error.errorMsg;
        }
    </script>
</head>
<body onload="init();">
<div id="map"></div>
<div id="queryresult"></div>
<div class="tip">"注：点击地图任意位置，案例以该位置进行栅格查询，查询完成后地图左下角会显示查询结果"</div>
</body>
</html>